import React, { Component } from 'react';

import autoPlay from 'react-swipeable-views/lib/autoPlay';
import SwipeableViews from 'react-swipeable-views';

import config from '../Config';
import reqwest from 'reqwest';
// console.log(config);
import './banner.css';

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

class Banner extends Component {
  static defaultProps = {
    bannerList: []
  }

  render() {
    var renderBanner = [];
    for (var i = 0; i < this.props.bannerList.length; i++) {
      var data = this.props.bannerList[i];
      // var link = data.url;
      var imgurl = data.img;
      renderBanner.push(<div key={i} className="banner-img">
        <img src={imgurl} alt=""/>
      </div>);
    }
    return (
      <AutoPlaySwipeableViews>
        {renderBanner}
      </AutoPlaySwipeableViews>
    )
  }
}


class BannerBlock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      banners: []
    }
  }
  loadBanner() {
    var self = this;
    const url = config.base_url + '/banner';
    reqwest({
      url: url,
      type: 'json',
      method: 'get',
      crossOrigin: true,
      error: err => {
        console.error('banner request', err)
      },
      success: data => {
        // console.log('banner success', data);
        self.setState({
          banners: data.banners
        })
      }
    })
  }
  
  componentDidMount() {
    this.loadBanner()
  }

  render() {
    return (
      <Banner bannerList={this.state.banners}></Banner>
    )
  }
}

export default BannerBlock;
